<!--
 * @Author: your name
 * @Date: 2021-09-21 14:31:41
 * @LastEditTime: 2021-10-08 10:39:50
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \product-display\src\page\operate\product\form.vue
-->
<template>
  <div class="productForm">
    <el-form ref="form" :model="form" label-width="100px" :rules="rules">
      <el-form-item label="商品分类：" prop="parentId">
        <el-cascader v-model="form.parentId" :options="options" :show-all-levels="false" placeholder="选择商品分类"></el-cascader>
      </el-form-item>
      <el-form-item label="商品名称：" prop="name">
        <el-input v-model="form.name" placeholder="请输入商品名称" maxlength="20"></el-input>
      </el-form-item>
      <el-form-item label="商品图片：">
        <el-upload
          action="http://47.102.146.65:8888/management-platform/batch/upload"
          list-type="picture-card"
          accept="image/*"
          :limit="1"
          :auto-upload="false"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :on-change="fileChange">
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button :loading="loading" type="primary" @click="onSubmit">立即创建</el-button>
        <el-button @click="back">返回</el-button>
      </el-form-item>
    </el-form>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>
import { addProduct } from '@/api/api.js'

export default {
  name: 'ProductForm',
  data () {
    return {
      loading: false,
      dialogImageUrl: '',
      dialogVisible: false,
      form: {
        name: '',
        parentId: undefined
      },
      options: [],
      rules: {
        parentId: [{ required: true, message: '请选择商品分类', trigger: 'change' }],
        name: [{ required: true, message: '请输入商品名称', trigger: 'change' }]
      },
      uploadFile: null
    }
  },
  mounted () {
    this.options = JSON.parse(localStorage.getItem('options') || '[]')
  },
  methods: {
    handleRemove () {
      this.uploadFile = null
    },
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    fileChange (file) {
      // console.log(file)
      if (this.beforeAvatarUpload(file)) {
        const formData = new FormData()
        formData.append('files', file.raw)
        this.uploadFile = formData
      }
    },
    beforeAvatarUpload (file) {
      const isLt2M = file.size / 1024 / 1024 < 5
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 5MB!')
      }
      return isLt2M
    },
    onSubmit () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (!this.uploadFile) {
            this.$message.error('请选择商品图！')
          }
          this.loading = true
          const parentId = this.form.parentId[this.form.parentId.length - 1]
          this.uploadFile.append('imageName', this.form.name)
          this.uploadFile.append('parentId', parentId)
          addProduct(this.uploadFile).then(res => {
            this.$message({
              message: '新增成功',
              type: 'success'
            })
            this.back()
          })
        }
      })
    },
    back () {
      this.$router.back()
    }
  }
}
</script>

<style lang="less" scoped>
.productForm {
  padding-top: 50px;
  width: 400px;
}
</style>
